<template>
  <div class="demo-app">
    <el-alert style="margin-top: 20px;" center title="请选择所属项目的工作量月份" type="success"></el-alert>
    <el-row style="margin-top: 20px;">
      <el-col :span="8" :offset="2">
        <el-date-picker
          v-model="mouth"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          format="yyyy年MM月"
          value-format="yyyy-MM"
        ></el-date-picker>
      </el-col>
    </el-row>

    <el-row style="margin-top: 20px;">
      <el-col :span="8" :offset="8">
        <el-button :loading="loading" type="success" @click="exportData">确定</el-button>
        <el-button @click="closeView" type="info">取消</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import request from "@/utils/request";
import _ from "lodash";
import { export_json_to_excel2 } from "@/utils/Export2Excel";
export default {
  components: {},
  created: function () {},
  data: function () {
    return {
      //选择的月份
      mouth: [],
      loading: false,
      //表格数据
      tableData: [{}],
    };
  },
  methods: {
    closeView() {
      this.$root.closeModal("/eip/project/exportWorkloadApproval");
    },
    exportData() {
      if (this.mouth == null) {
        this.$message.info("请选择月份");
        return;
      }
      if (this.mouth.length == 0) {
        this.$message.info("请选择月份");
        return;
      }
      this.loading = true;
      var ids = this.$attrs.ids;
      var mouth = _.join(this.mouth, ",");
      request({
        url: "/eip/project2/getMouthWorkloadData",
        method: "post",
        data: { ids: ids, mouth: mouth },
        timeout: 0,
      })
        .then((r) => {
          if (r.success) {
            this.tableData = r.data;
            this.exportExcel();
          } else {
            this.tableData = [{}];
            this.msgError(r.message);
          }
          this.loading = false;
        })
        .catch((e) => {
          this.msgError(e || "数据请求失败");
        });
    },
    //`方法：数据导出`
    download() {
      this.exportExcel();
    },
    //导出的方法
    exportExcel() {
      require.ensure([], () => {
        const row = Object.keys(this.tableData[0]).sort().slice(0, -3);
        const rowc = [].concat(row);
        row.unshift("序号", "项目号码", "项目名称", "姓名");
        rowc.unshift("index", "projectCode", "projectName", "userName");
        const header = row;
        // 上面设置Excel的表格第一行的标题
        const filterVal = rowc;
        const list = this.tableData; //把data里的tableData存到list
        for (let i = 0; i < list.length; i++) {
          list[i]["index"] = i + 1;
        }
        var header2 = [
          "序号",
          "项目号码",
          "项目名称",
          "姓名",
          "项目工作量（原始工作量，人时）每人每天不超过7.5小时",
        ];
        for (let j = 0; j < row.length; j++) {
          header2.push("");
        }
        const multiHeader = [header2]; // 前一行的表头数据，二维数组，不够的用空白补全
        const data = this.formatJson(filterVal, list);
        const merges = ["A1:A2", "B1:B2", "C1:C2", "D1:D2", "E1:Q1"]; // 合并单元格的数据，如何合并参考上面图片讲解
        export_json_to_excel2({
          multiHeader,
          header,
          merges,
          data,
          filename: "工作量核算表",
        });
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
};
</script>

<style lang='css' scoped>
</style>
